<div class="modal fade" tabindex="-1" [ngClass]="{'in': modalVisibleAnimate}"
    [ngStyle]="{'display': modalVisible ? 'block' : 'none', 'opacity': modalVisibleAnimate ? 1 : 0}">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" (click)="cancel()" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">{{ modalContent.header }}</h4>
            </div>
            <div class="modal-body">
                {{ modalContent.body }}
            </div>
            <div class="modal-footer">
                @if (modalContent.cancelButtonVisible) {
                    <button type="button" class="btn btn-default" (click)="cancel()">{{ modalContent.cancelButtonText }}</button>
                }
                <button type="button" class="btn btn-primary" (click)="ok()">{{ modalContent.OKButtonText }}</button>
            </div>
        </div>
    </div>
</div>